<div ng-if="!$ctrl.canDrag">
    <small class="text-info"
        ng-bind="$ctrl.translate('warning_can_not_drag_drop',true, 'Note: Drag & Drop feature only active when priority is asc')"></small>
</div>

<div class="data-table" ng-if="$ctrl.data.items" ng-init="$ctrl.init()">
    <div class="container-fluid">
        <div class="row header border-top">
            <div class="col-1">
                <!-- <small class="fa fa-grip-vertical text-black-50 align-middle"></small> -->
            </div>
            <div scope="col" class="col-sm-1">
                <i class="fas fa-sort-numeric-down"></i>
            </div>
            <div scope="col" class="col-sm-{{$ctrl.colWidth}}" ng-repeat="col in $ctrl.columns track by $index">
                <span ng-bind="col.title">
                </span>
            </div>
            <div scope="col" class="col-sm-2">
            </div>
        </div>
    </div>
    <div dnd-list="$ctrl.data.items" id="list-page" class="nav" ng-if="$ctrl.data.items.length"
        dnd-inserted="$ctrl.insertCallback(index, item, external, type)" dnd-disable-if="!$ctrl.canDrag">
        <div class="col-sm-12 dndPlaceholder"></div>
        <div ng-repeat="nav in $ctrl.data.items" class="container-fluid dnd-item rounded-0 border-left-0 border-right-0 border-bottom-0"
            dnd-draggable="nav" dnd-moved="$ctrl.updateOrders($index,$ctrl.data.items)" dnd-effect-allowed="move"
            dnd-selected="$ctrl.selected = nav" ng-class="{'selected': $ctrl.selected === nav}">
            <div class="row">
                <div class="col-1 drag-header small" style="cursor:grab;">
                    <small class="fa fa-grip-vertical text-black-50 align-middle small"></small>
                </div>
                <div class="col-sm-1">
                    <!-- <input style="width:40px" type="number" readonly="readonly" ng-model="nav.priority"
                        class="item-priority form-control form-control-sm d-inline"> -->
                        <small class="small">{{nav.priority}}</small>
                </div>
                <div class="col-sm-{{$ctrl.colWidth}}" ng-repeat="col in $ctrl.columns track by $index">
                    <small>
                        <mix-data-preview type="col.type" value="nav[col.name]" width="50" class="align-middle">
                        </mix-data-preview>
                    </small>
                </div>
                <div class="col-sm-{{$ctrl.lastColWidth}}">
                    <div class="btn-group btn-group-sm float-right" role="group" aria-label="Actions">
                        <a ng-if="nav.childNavs.length > 0" class="btn btn-dark text-primary" ng-click="$ctrl.toggleChildNavs(nav)">
                            <span class="fa fa-list"></span>
                        </a>
                        <a ng-if="$ctrl.editUrl" ng-click="$ctrl.goTo(nav.id)" class="btn btn-sm text-primary ">
                            <span class="fas fa-pen"></span>
                        </a>
                        <a ng-click="$ctrl.delete(nav.id);" class="btn btn-sm del-popover text-danger" data-toggle="popover"
                            data-html="true">
                            <span class="fas fa-trash-alt"></span>
                        </a>
                    </div>
                </div>
            </div>
            <!-- Childs -->
            <div ng-show="nav.showChildNavs" dnd-list="nav.childNavs" class="nav" dnd-disable-if="!$ctrl.canDrag">
                <div class="col-sm-12 dndPlaceholder"></div>
                <div ng-repeat="snav in nav.childNavs" class="col-sm-12 dnd-item" dnd-draggable="snav"
                    dnd-moved="$ctrl.updateChildOrders($index,nav.childNavs)" dnd-effect-allowed="move"
                    dnd-selected="$ctrl.selected = snav">
                    <div class="row">
                        <div class="col-1 drag-header" style="cursor:grab;">
                            <small class="fa fa-grip-vertical text-black-50 align-middle"></small>
                        </div>
                        <div class="col-sm-1">
                            <input type="number" readonly="readonly" ng-model="snav.priority"
                                class="item-priority form-control form-control-sm d-inline">
                        </div>
                        <div class="col-sm-{{$ctrl.colWidth}}" ng-repeat="col in $ctrl.columns">
                            <mix-data-preview type="col.type" value="snav.page[col.name]" width="50">
                            </mix-data-preview>
                        </div>
                        <div class="col-sm-{{$ctrl.lastColWidth}}">
                            <div class="btn-group btn-group-sm float-right" role="group" aria-label="Actions">
                                <a ng-if="$ctrl.editUrl" ng-click="$ctrl.goTo(snav.id)" class="btn btn-sm btn-dark text-primary">
                                    <span class="fas fa-pen"></span>
                                </a>
                                <a ng-click="$ctrl.delete(snav.id);" class="btn btn-dark del-popover text-danger"
                                    data-toggle="popover" data-html="true">
                                    <span class="fas fa-trash-alt"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Childs -->
        </div>
    </div>
</div>
<!-- <div class="card">
    <div class="card-body">
    </div>
</div> -->